<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
     String path=request.getContextPath();
      String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="<%=basePath%>css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<script src="<%=basePath%>js/jquery.min.js"></script>
<script src="<%=basePath%>js/scripts.js"></script>
<link href="<%=basePath%>css/styles.css" rel="stylesheet">
<link href="<%=basePath%>css/style.css" rel="stylesheet" type="text/css" media="all" />	
<link rel="stylesheet" href="<%=basePath%>layui/css/layui.css" media="all"/>
<script src="<%=basePath%>layui/layui.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Real Home  Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</head>
<body>

<div class="header">
	<div class="container">
		<!--logo-->
			<div class="logo">
				<h1><a href="welcome.jsp">Cloud renting</a></h1>
			</div>
		<!--//logo-->
		<div class="top-nav">
			<ul class="right-icons">
				<li><a  href="${pageContext.request.contextPath}/user/home1"><i class="glyphicon glyphicon-user"> </i>Login</a></li>
			</ul>
		<div class="clearfix"> </div>
			<!---pop-up-box---->
			   
				<link href="<%=basePath%>css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
				<script src="<%=basePath%>js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!---//pop-up-box---->
				<div id="small-dialog" class="mfp-hide">
					    
					 <script src="<%=basePath%>js/easyResponsiveTabs.js" type="text/javascript"></script>
				</div>
				</div>
				 <script>
						$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
						});
																						
						});
				</script>
					
	
		</div>
		<div class="clearfix"> </div>
		</div>	
<!--//-->	
<div class=" banner-buying">
	<div class=" container">
	
	<div class="clearfix"> </div>
	</div>
</div>

<!--contact-->
<div class="login-right">
	<div class="container">
		<h3>Register</h3>
		<div class="login-top">
				<ul class="login-icons">
					
					<div class="clearfix"> </div>
				</ul>
				<div class="form-info">
	<form action="" class="layui-form" method="post">
    <div class="layui-form-item">
      <label class="layui-form-label">登录名</label>
         <div class="layui-input-block">
            <input type="text" name="loginname" lay-verify="loginname"  placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
         <div class="layui-input-block">
            <input type="password" name="loginpwd" lay-verify="pass"  placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
    <div class="layui-form-item">
      <label class="layui-form-label">用户名称</label>
         <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required"  placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">电话号码</label>
         <div class="layui-input-block">
            <input type="text" name="phone" id="phone" lay-verify="phone"  placeholder="请输入" autocomplete="off" class="layui-input">
        <button type="reset" class="class="layui-btn layui-btn-sm" onclick="button()">获取验证码</button>
        </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">输入验证码</label>
         <div class="layui-input-block">
            <input type="text" name="code"   placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
         <div class="layui-input-block">
            <input type="text" name="email" lay-verify="email" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
    <div class="layui-inline">
      <label class="layui-form-label">出生日期</label>
         <div class="layui-input-inline">
             <input type="text" name="birthday1" id="birthday"   lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
   </div>
   
   <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="upload1">上传图片</button>
            <input type="hidden" id="img_url" name="headimg" value=""/>
            <div class="layui-upload-list">
                <img class="layui-upload-img" width="100px" height="80px" id="demo1"/>
                <p id="demoText"></p>
            </div>
        </div>
    </div>
   
   
   <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="1" title="男" >
      <input type="radio" name="sex" value="0" title="女">
    </div>
  </div>
   <div class="layui-form-item">
      <label class="layui-form-label">年龄</label>
         <div class="layui-input-block">
            <input type="text" name="age"   placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">用户身份</label>
    <div class="layui-input-block">
      <select name="usertypeid" lay-verify="required" lay-filter="aihao">
        <option value=""></option>
        <option value="1">租客</option>
        <option value="2">房东</option>
      </select>
    </div>
  </div>
   <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="demo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
   </form>
					<p>已有账号? <a href="${pageContext.request.contextPath}/user/login">前往登录</a></p>
				</div>
			
	</div>
</div>
</div>
<!--//contact-->
<!--footer-->
<div class="footer">
	<div class="container">
		<div class="footer-top-at">
			<div class="col-md-3 amet-sed">
				<h4>Our Company</h4>
				<ul class="nav-bottom">
					<li><a href="demo/404.html">About Us</a></li>
					<li><a href="demo/404.html">For Sale By Owner Blog</a></li>
					<li><a href="demo/404.html">Mobile</a></li>
					<li><a href="demo/404.html">Terms & Conditions</a></li>
					<li><a href="demo/404.html">Privacy Policy</a></li>	
					<li><a href="demo/404.html">Blog</a></li>
					
				</ul>	
			</div>
			<div class="col-md-3 amet-sed ">
				<h4>Work With Us</h4>
					<ul class="nav-bottom">
						<li><a href="demo/404.html">Real Estate Brokers</a></li>
						<li><a href="demo/404.html">Business Development</a></li>
						<li><a href="demo/404.html">Affiliate Programs</a></li>
						<li><a href="demo/404.html">Sitemap</a></li>
						<li><a href="demo/404.html">Careers</a></li>
						<li><a href="demo/404.html">Feedback</a></li>	
					</ul>	
			</div>
			<div class="col-md-3 amet-sed">
				<h4>Customer Support</h4>
				<p>Mon-Fri, 7AM-7PM </p>
				<p>Sat-Sun, 8AM-5PM </p>
				<p>177-869-6559</p>
					<ul class="nav-bottom">
						<li><a href="demo/404.html">Live Chat</a></li>
						<li><a href="demo/404.html">Frequently Asked Questions</a></li>
						<li><a href="demo/404.html">Make a Suggestion</a></li>
					</ul>	
			</div>
			<div class="col-md-3 amet-sed ">
				<h4>Property Services</h4>
				   <ul class="nav-bottom">
						<li><a href="demo/404.html">Residential Property</a></li>
						<li><a href="demo/404.html">Commercial Property</a></li>
						<li><a href="demo/404.html">Login</a></li>
						<li><a href="demo/404.html">Register</a></li>
						<li><a href="typo.html">Short Codes</a></li>	
					</ul>	
					<ul class="social">
						<li><a href="demo/404.html"><i> </i></a></li>
						<li><a href="demo/404.html"><i class="gmail"> </i></a></li>
						<li><a href="demo/404.html"><i class="twitter"> </i></a></li>
						<li><a href="demo/404.html"><i class="camera"> </i></a></li>
						<li><a href="demo/404.html"><i class="dribble"> </i></a></li>
					</ul>
			</div>
		<div class="clearfix"> </div>
		</div>
	</div>
	<div class="footer-bottom">
		<div class="container">
			<div class="col-md-4 footer-logo">
				<h2><a href="index.html">REAL HOME</a></h2>
			</div>
			<div class="col-md-8 footer-class">
				<p >Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</div>
		<div class="clearfix"> </div>
	 	</div>
	</div>
</div>
<!--//footer-->
<script type="text/javascript">
layui.use(['form','laydate'],function(){
	 var form = layui.form;
	 var $=layui.jquery;
	  layer = layui.layer
	  ,laydate = layui.laydate;
	 laydate.render({
		    elem: '#birthday'
		  });
	 form.on('submit(demo)',function(data){
		 alert(1);
		 console.log(data);
		 $.ajax({
			 type:'post',
			 data:data.field,
			 url:'user/register',
			 success:function(data){
				  layui.use('layer', function(){
		        	  var layer = layui.layer;
		        	  var $=layui.jquery;
				      layer.msg(data.msg);
				  });
			 }
		 })
	 });
	 form.verify({
		  loginname: function(value, item){ //value：表单的值、item：表单的DOM对象
		    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
		      return '用户名不能有特殊字符';
		    }
		    if(/(^\_)|(\__)|(\_+$)/.test(value)){
		      return '用户名首尾不能出现下划线\'_\'';
		    }
		    if(/^\d+\d+\d$/.test(value)){
		      return '用户名不能全为数字';
		    }
		  }
		  
		  //我们既支持上述函数式的方式，也支持下述数组的形式
		  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
		  ,pass: [
		    /^[\S]{6,12}$/
		    ,'密码必须6到12位，且不能出现空格'
		  ] 
		}); 
});
layui.use('upload', function(){
    var upload = layui.upload
        , $ = layui.jquery;
    var uploadInst = upload.render({
        elem: '#upload1' //绑定元素
        ,url: 'update/img' //上传接口
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#demo1').attr('src', result); //图片链接（base64）
            });
        },
        done: function(res){
            //如果上传失败
            if(res.code > 0){
                return layer.msg('上传失败');
            }
            //上传成功
            alert("上传成功"+res.url);
            document.getElementById("img_url").value = res.url;
        },
        error: function(){
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });

    }
})
})
function button(){
	
	var phone=$("#phone").val();
	$.ajax({
		type:'post',
		url:'update/code',
		data:{
			"phone":phone
		},	
		success:function(){
			
		}
	})
}
</script>
</body>
</html>